ノーコードツールBubbleでTODOアプリを作ってみた

こんにちは。CX事業本部のKyoです。Bubbleというツールを検証したのでレポートします。

Bubble is 何？

ノーコード・ローコード系のツールでWebアプリケーションの開発を行うことができます。

実際にBubbleで開発・運用されているWebアプリが事例として公式サイトにまとまっています。

また、日本語の情報も多いようで、QiitaやNoteにも多数の記事が上がっています。

触ってみる

例に漏れず認証付きのTODOアプリを作ってみました。

なお、TODOアプリの作成はチュートリアルでも取り上げられています。 Bubbleのチュートリアルは1つ1つが短く、数も多いので多機能なBubbleの全体像を把握するのによかったです。

操作手順の詳細はチュートリアルに譲りつつ、以下で認証とTODO操作の雰囲気について紹介します。

認証

左側からのツリーからドラッグ&ドロップする形で画面に要素を追加します。認証に関してはテンプレートが用意されており、数秒で実装できます。

Bubbleではイベントに対応してワークフローという一連の処理を走らせることができます。認証のテンプレートでは、ボタンがクリックされた際にログイン用のワークフローが走るようにプリセットされています。

ユーザーのデータはBubble自身の持つデータベースに保存されます。この情報もプリセットされています。

TODO登録

左側のツリーからタイトル用のテキスト、TODO用のインプットボックス、作成用のボタンを持ってきます。ボタンに対してワークフローを設定します。

TODOというデータ型でインプットボックスからデータベースにデータを保存するワークフローを設定します。 インプットボックスからタイトルと期日を取得します。この際に状態(Finished)は固定値の"no"が入るようにします。

データ構造は以下のような形です。

TODO一覧表示

Repeating Groupというテーブルのような要素を追加します。この要素に対してデータベースにあるTODOデータを紐付けます。 また、この際に以下のルールを加えました。

• TODOの状態(Finished)が"no"である
• TODOの登録者がログインしているユーザーと等しい
• 期日で昇順ソート

実際に表示するTODOのタイトル、期日を表示するテキストボックスを追加し、TODOのデータを反映するように設定します。

TODO完了

Repeating Groupのセルに完了用のボタンを配置し、ワークフローを設定します。

ワークフローでは対象のTODOの状態(Finished)を”yes”にアップデートします。

動かしてみる

画面右上のPreviewボタンから実行します。

認証画面です。メールアドレスの形式のバリデーションも含まれています。

TODO画面です。タスクを登録し、完了ボタンで一覧から表示されなくなることを確認しました。

所感

肌感にはなりますが、ノーコードツールとしてはかなりできることが多いように思いました。実績が多いのもうれしいところです。一方でデータベースをはじめ、知っておかないといけないこともそれなりにありそうだとも思いました（今回は取り上げなかったプラグイン連携も含めるとメリット・デメリット共にその傾向は強くなりそうです）。

普段コーディングは行わないがシステムの基礎知識はある、といった人であれば、よりBubbleの強みを引き出せるのかもしれません。

あせて読みたい

本エントリの推敲中にDevIOにもBubbleに関するエントリがあることに気づいたのでリンクを貼っておきます。